<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24"
			        style="padding: 0px;">
				<el-col :span="6"
				        style="padding-right: 5px!important;padding-left: 15px!important">
					<el-button type="primary"
					           size="small"
					           v-on:click='getParamDefTree'>选取使用参数</el-button>
				</el-col>
				<el-col :span="5">
					<span style="float:left">当前分类：{{this.$data.curentPName}} </span>
				</el-col>
				<el-col :span="7">
					<span style="float:left;margin-left:10px ">当前公司：{{this.$data.companyName}}</span>
				</el-col>
				<el-col :span="6"
				        style="text-align: right">
					<el-button type="primary"
					           size="small"
					           v-on:click='edit'>编辑</el-button>
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6"
			        style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramSetTreeData"
				         :filter-node-method="filterNode"
				         :highlight-current=true
				         :props="defaultProps"
				         accordion
				         @node-click="handleNodeClick"
				         :auto-expand-parent=false
				         ref="paramSetTree"
				         node-key="id"></el-tree>
			</el-col>
			<el-col :span="18"
			        style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table border
				          stripe
				          :data="params.dataList"
				          style="width: 100%;height:480;"
				          @selection-change="handleSelectionChange">
					<el-table-column type="selection"
					                 width="60"
					                 fixed>
					</el-table-column>
					<el-table-column prop="code"
					                 label="编码"
					                 width="120">
					</el-table-column>
					<el-table-column prop="name"
					                 label="名称"
					                >
					</el-table-column>
					<el-table-column prop="type"
					                 label="类型"
					                 :formatter="typeCov"
					                 width="120">
					</el-table-column>
					<el-table-column prop="valueType"
					                 label="值类型"
					                 :formatter="valueCov"
					                 width="120">
					</el-table-column>
					<el-table-column prop="value"
					                 label="参数值"
					                  width="80">
					</el-table-column>
					<!--</el-table-column>
											<el-table-column label="操作" width="140" fixed="right">
												<template scope="scope">
													<el-tooltip class="item" effect="light" content="编辑" placement="top">
														<el-button type="primary" size="mini" class="iconfont icon-dingdan" @click.native.prevent="edit(scope.$index)"></el-button>
													</el-tooltip>
												</template>
											</el-table-column>-->
				</el-table>
				<el-pagination small
				               @current-change="handleCurrentChange"
				               :current-page="curPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="params.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="修改默认值"
		           v-model="paraFormShow">
			<el-form :model="paramFormData"
			         ref="paramForm"
			         :rules="paramRule"
			         label-width="100px">
				<el-form-item label="值类型"
				              required
				              prop="valueType">
					<el-select size="small"
					           v-model="paramFormData.valueType"
					           :disabled=true
					           placeholder="请选择"
					           readonly>
						<el-option v-for="item in valueTypeCombo"
						           :label="item.label"
						           :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="参数值"
				              prop="value"
				              required>
					<el-input size="small"
					          v-model="paramFormData.value"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="paraFormShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveParam">提 交</el-button>
			</div>
		</el-dialog>
		<!--选取使用参数 -->
		<el-dialog title="选取参数"
		           v-model="paraDefTreeShow">
			<!-- 参数树 -->
			<el-tree :data="paramDefTreeData"
			         :filter-node-method="filterNode"
			         :highlight-current=true
			         :props="defaultProps"
			         accordion
			         :auto-expand-parent=false
			         show-checkbox
			         ref="paramDefTree"
			         node-key="id"></el-tree>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="paraDefTreeShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveParamDefNode">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			companyName: window.localStorage.getItem("companyName"),
			//参数树
			paraDefTreeShow: false,
			paramDefTreeData: [],
			//已选择的参数树
			paramSetTreeData: [],
			//分页设置
			page: this.page,
			//当前分组页
			curPage: 1,
			params: {
				dataList: [],
				total: 0
			},

			//树过滤条件
			treeFilterValue: '',

			//树型数据配置
			defaultProps: {
				children: 'child',
				label: 'name'
			},

			//树型数据
			paramTreeData: [],
			//默认选中的上级节点
			curentPCode: "-1",
			curentPName: "",

			//子菜单表格数据
			paramTabelData: [],
			//子系统下级
			sysChild: [],
			//模块下级
			moduleChild: [],
			//功能下级
			funcChild: [],
			//资源类型下拉数据
			resTypeComboData: [],
			//资源表单是否显示
			paraFormShow: false,
			//资源 Form 数据
			paramFormData: {
				id: '',
				code: '',
				name: '',
				value: '',
				valueType: '',
				pCode: '',
				updateTime: 0,
				updateUser: '',
				createTime: 0,
				createUser: ''
			},

			//类型下拉数据
			typeCombo: [{
				label: '分组',
				value: '0'
			}, {
				label: '参数',
				value: '1'
			}],

			//类型下拉数据
			valueTypeCombo: [{
				label: '数字',
				value: '0'
			}, {
				label: '字符',
				value: '1'
			}],
			//资源类型转换
			resTypeData: {},
			//当前树型节点 ID
			curTreeResId: '',
			curTreeResType: '',
			//表单较验规则
			paramRule: {
				code: [{
					required: true,
					message: '请填写编码',
					trigger: 'blur'
				}],
				name: [{
					required: true,
					message: '请填写名称',
					trigger: 'blur'
				}],
				type: [{
					required: true,
					message: '请选择类型',
					trigger: 'blur'
				}],
				valueType: [{
					required: true,
					message: '请选择值类型',
					trigger: 'blur'
				}],
				defValue: [{
					required: true,
					message: '请填写默认值',
					trigger: 'blur'
				}],
			},
			//选中的列
			multipleSelection: []
		}
	},
	methods: {
		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
		},
		//查询获取到的参数树
		getParamDefTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/base/param/set/defTree', {}).then((response) => {
				this.$data.paramDefTreeData = response.data.dataList;

				//获取资源树
				this.$http.get(this.API_ROOT + '/base/param/set/checkedDef', {}).then((response) => {
					this.$refs.paramDefTree.setCheckedKeys(response.data.dataList);

				}, (response) => { });
				this.$data.paraDefTreeShow = true;
			}, (response) => { });

		},
		//保存参数定义
		saveParamDefNode: function () {
			var checkNodes = this.$refs.paramDefTree.getCheckedNodes();
			var data = {
				data: JSON.stringify(checkNodes),
			}
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/base/param/set/save',
				body: checkNodes,
				params: {}
			}).then(function (resp) {
				this.$message(resp.data.msg);
				if (resp.data.success) {
					this.$data.paraDefTreeShow = false;
					//刷新参数
					this.queryParamSetTree();
				}
			}, function (error) {
				// error
			})
		},

		//查询已分配的参数树
		queryParamSetTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/base/param/set/setTree', {}).then((response) => {
				this.$data.paramSetTreeData = response.data.dataList;
			}, (response) => { });
		},

		//分页查询
		handleCurrentChange: function () {

		},
		//查询树节点
		searchTree: function () {
			if (this.$data.resTreeSearchValue == "") {
				this.$message("请输入查询条件");
				this.queryTree();
				return;
			}
			this.$refs.paramTree.filter(this.$data.resTreeSearchValue);
		},
		//点击资源树节点
		handleNodeClick(data) {
			this.$data.curentPCode = data.code;
			this.$data.curentPName = data.name;
			this.queryParamGrid();
		},
		//查询资源列表
		queryParamGrid: function () {
			this.$http.get(this.API_ROOT + '/base/param/set/page', {
				params: {
					pCode: this.$data.curentPCode,
					start: this.$data.curPage,
					limit: this.$data.page.pageSize
				}
			}).then((response) => {
				this.$data.params.total = Number(response.data.total);
				this.$data.params.dataList = response.data.dataList; //Object.assign(this.$data. paramTabelData, response.data.dataList);
			}, (response) => { });
		},

		//启用资源
		start: function (index) {
			var data = this.$data.params.dataList[index];
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/base/param/def/start',
				params: {
					id: data.id,
				}
			}).then(function (resp) {
				this.$message(resp.data.msg);
				this.queryParamGrid();
			}, function (error) {
				// error
			})
		},
		//停用资源
		stop: function (index) {
			var data = this.$data.params.dataList[index];
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/base/param/def/stop',
				params: {
					id: data.id,
				}
			}).then(function (resp) {
				this.$message(resp.data.msg);
				this.queryParamGrid();
			}, function (error) {
				// error
			})
		},

		//编辑
		edit: function (index) {
			debugger;
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0];
				this.$data.paramFormData = Object.assign(this.$data.paramFormData, data);
				this.$data.paraFormShow = true;
			}
			else {
				this.$message.error("请选择一条数据")
			}




		},
		//保存参数
		saveParam: function (index) {
			this.$refs.paramForm.validate(function (valid) {
				if (valid) {
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/base/param/set/changValue',
						params: {
							id: this.$data.paramFormData.id,
							value: this.$data.paramFormData.value
						}
					}).then(function (resp) {
						this.$message(resp.data.msg);
						this.queryParamGrid();
						this.$data.paraFormShow = false;
					}, function (error) {
						// error
					})
				}
				return false;
			}.bind(this));
		},
		//状态转换
		statusCov: function (row, column) {
			return row.status == 1 || row.status == "1" ? "已启用" : "已停用";
		},
		//资源类型转换
		typeCov: function (row, column) {
			return row.type == "0" || row.type == 0 ? "分组" : "参数";
		},

		//资源类型转换
		valueCov: function (row, column) {
			if (row.valueType == null || row.valueType == "") {
				return "";
			}
			return (row.valueType == "0" || row.valueType == 0) ? "数字" : "字符";
		},

		queryTree: function () {
			this.$http.get(this.API_ROOT + '/rbac/res/resTree', {}).then((response) => {
				this.$data.paramTreeData = response.data.dataList;
			}, (response) => { });
		},
		//资源过滤
		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.resName.indexOf(value) !== -1;
		},
		//查询参数树
		queryParamTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/base/param/set/tree', {}).then((response) => {
				this.$data.paramTreeData = response.data.dataList;
				this.$data.curentPCode = "-1";
			}, (response) => { });
		}
	},
	//组件创建时
	created: function () {
		//查询参数树
		//this.queryParamTree();
		this.queryParamSetTree();
	}

};
</script>
<style>

</style>